<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div class="container">
      <route-view></route-view>
    </div>
  </div>
</template>

<script>
  import RouteView from "@/components/layouts/RouteView"
  import { mixinDevice } from '@/utils/mixin.js'

  export default {
    name: "UserLayout",
    components: { RouteView },
    mixins: [mixinDevice],
    data () {
      return {}
    },
    mounted () {
      document.body.classList.add('userLayout')
    },
    beforeDestroy () {
      document.body.classList.remove('userLayout')
    },
  }
</script>

<style lang="scss" scoped>
  #userLayout.user-layout-wrapper {
    height: 100%;

    // &.mobile {
    //   .container {
    //     .main {
    //       max-width: 368px;
    //       width: 98%;
    //     }
    //   }
    // }

    .container {
      width: 100%;
      height: 100%;
      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
      background-size: 100%;
      position: relative;

      a {
        text-decoration: none;
      }

      // .top {
      //   text-align: center;

      //   .header {
      //     height: 44px;
      //     line-height: 44px;

      //     .badge {
      //       position: absolute;
      //       display: inline-block;
      //       line-height: 1;
      //       vertical-align: middle;
      //       margin-left: -12px;
      //       margin-top: -10px;
      //       opacity: 0.8;
      //     }

      //     .logo {
      //       height: 44px;
      //       vertical-align: top;
      //       margin-right: 16px;
      //       border-style: none;
      //     }

      //     .title {
      //       font-size: 33px;
      //       color: rgba(0, 0, 0, .85);
      //       font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      //       font-weight: 600;
      //       position: relative;
      //       top: 2px;
      //     }
      //   }
      //   .desc {
      //     font-size: 14px;
      //     color: rgba(0, 0, 0, 0.45);
      //     margin-top: 12px;
      //     margin-bottom: 40px;
      //   }
      // }

      .main {
        height: 100%;
        margin: 0 auto;
      }

      // .footer {
      //   position: absolute;
      //   width: 100%;
      //   bottom: 0;
      //   padding: 0 16px;
      //   margin: 48px 0 24px;
      //   text-align: center;

      //   .links {
      //     margin-bottom: 8px;
      //     font-size: 14px;
      //     a {
      //       color: rgba(0, 0, 0, 0.45);
      //       transition: all 0.3s;
      //       &:not(:last-child) {
      //         margin-right: 40px;
      //       }
      //     }
      //   }
      //   .copyright {
      //     color: rgba(0, 0, 0, 0.45);
      //     font-size: 14px;
      //   }
      // }
    }
  }
</style>